<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>尺寸</title>

        <style type="text/css">
            .wrapper {
                display: block ; /* 对于块元素来说，其 display 属性值默认都是 block */
                width: 80% ;
                height: 100px ;
                border: 1px solid red ;
            }

            /* 复合选择器 之 亲子选择器 (注意 父元素选择器 和 子元素选择器 之间使用 大于号 连接 ) */
            .wrapper>* {
                display: inline-block ; /* 将元素设置为 内联块 (inline-block) 后宽度和高度是起作用的 */
                width: 200px ;
                height: 100px ;
                background-color: #ff9100 ;
                text-align: center ;
                font-size: 60px ;
            }

            .container {
                display: block ;
                width: 80% ;
                height: 100px ;
                border: 1px solid red ;
                margin-top: 15px ;
                font-size: 0px ;
            }

            /* 复合选择器 之 亲子选择器 (注意 父元素选择器 和 子元素选择器 之间使用 大于号 连接 ) */
            .container>* {
                display: inline-block ; /* 将元素设置为 内联块 (inline-block) 后宽度和高度是起作用的 */
                width: 200px ;
                height: 100px ;
                background-color: #ff9100 ;
                text-align: center ;
                font-size: 60px ;
            }

            .odd { background-color: #dedede ; }
        </style>

    </head>
    <body>

        <div class="wrapper">
            <a>啊</a>
            <span>死胖</span>
            <u>you</u>
            <i>爱</i>
            <s>S</s>
            <b>B</b>
        </div>

        <div class="container">
            <a class="odd">啊</a>
            <span>死胖</span>
            <u class="odd">you</u>
            <i>爱</i>
            <s class="odd">S</s>
            <b>B</b>
        </div>
        
    </body>
</html>